import React, { FunctionComponent } from 'react';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import Skeleton from '@mui/material/Skeleton';
import ListItemText from '@mui/material/ListItemText';
import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../../../components/Theme';

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
const useStyles = makeStyles<Theme>((theme) => ({
  itemIcon: {
    marginRight: 0,
    color: theme.palette.primary.main,
  },
}));

const StixCyberObservableMalwareAnalysesDummyList: FunctionComponent = () => {
  const classes = useStyles();

  return (
    <>{Array(3)
      .fill(0)
      .map((index) => (
        <ListItem
          key={index}
          dense={true}
          divider={true}
        >
          <ListItemIcon classes={{ root: classes.itemIcon }}>
            <Skeleton
              animation="wave"
              variant="circular"
              width={30}
              height={30}
            />
          </ListItemIcon>
          <ListItemText
            primary={
              <Skeleton
                animation="wave"
                variant="rectangular"
                width="90%"
                height={15}
                style={{ marginBottom: 10 }}
              />
            }
            secondary={
              <Skeleton
                animation="wave"
                variant="rectangular"
                width="90%"
                height={15}
              />
            }
          />
        </ListItem>
      ))}</>
  );
};

export default StixCyberObservableMalwareAnalysesDummyList;
